<template>
  <div class="oe-approval-paper" v-loading="loading">
    <a-tooltip>
      <template slot="title">回到顶部</template>
      <a-back-top />
    </a-tooltip>
    <info-top :showExpend="false"></info-top>
    <div class="oe-ap-paper-container">
      <top-tip v-if="examTitle" :examTitle="examTitle"></top-tip>
      <div class="oe-ap-paper-content" v-if="paperList.length">
        <div class="oe-ap-left">
          <answer-card
            :questionList="questionList"
            type="right"
            :Submit="false"
            :showNext="showNext"
          ></answer-card>
        </div>
        <div class="oe-ap-center" v-if="paperShow">
          <teaTestPaper :questionData="paperList" :showAnswer="true" :numInputStatus='"examine"'></teaTestPaper>
        </div>
        <div class="fl oe-stu-list">
          <span class="stu-list-title"
            >学生列表<label style="color:#0177D5;">({{ stuList.length }})</label></span
          >
          <div class="stu-list-box">
            <div
              class="stu-lis"
              v-for="(item, index) in stuList"
              :key="index"
              :class="{ 'stu-lis-activate': item.Id == stuIdlis }"
              @click="getStuId(item)"
            >
              <!--  -->
              <img :src="AvatorUrl" alt="" />
              <div class="stu-lis-content">
                <div>{{item.UserName}}</div>
                <p>{{item.DisplayName}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="paper-no-data" v-if="!paperList.length">
        <blank-tips></blank-tips>
      </div>
    </div>
  </div>
</template>

<script>
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import answerCard from '@/components/answer-card/index.vue';
import blankTips from '@/components/blank-tips/index.vue';
import teaTestPaper from '@/components/teaTestPaper/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'approvalPaper',
  mixins: [GetOperationList],
  components: {
    infoTop,
    topTip,
    answerCard,
    blankTips,
    teaTestPaper
  },
  data() {
    return {
      // 左边控制
      questionList: [],
      paperList:[],
      loading: false,
      isShowScore: true,
      // 显示批阅下一个
      showNext: false,
      // 批阅卷子的id
      workExamStuId: '',
      stuList: [],
      query: '',
      AvatorUrl: '/common/images/default_avatar.jpg',
      Id: '',
      paperShow: true,
      examTitle:''
    };
  },
  props:{
    examid:{
      type:String,
      default:''
    }
  },
  mounted(){
    this.getMarkedPaperStuList();
    this.getOpeartion()
  },
  methods: {
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    getMarkedPaperStuList() {
      this.$http
        .post('/api/design/Marking/getMarkedPaperStuList', {
          examId: this.examid
        })
        .then((res) => {
          if (res.code > 0) {
            this.stuList = res.list;
            this.stuIdlis = res.list[0].Id;
            this.getMarkedStuPaperInfo();
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 获取批阅卷
    getMarkedStuPaperInfo() {
      this.loading = true;
      this.$http
        .post('/api/design/marking/getMarkedStuPaperInfo', {
          examId: this.examid,
          workExamStuId: this.stuIdlis
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.showNext = false;
            // 初试化题目列表
            this.paperList = rst.list
            if (rst.list.length) {
              this.paperShow = false;
              // 初始化左边卡片
              this.questionList = rst.list;
              this.$forceUpdate();
              setTimeout(() => {
                this.paperShow = true;
              }, 200);
            }
          } else {
            this.$message.error(rst.msg);
            this.$router.back();
          }
        });
    },
    getStuId(item) {
      this.stuIdlis = item.Id;
      this.getMarkedStuPaperInfo();
    }
  }
};
</script>
